<template>
	<view class="index">
		<view class="ot">

		</view>
		<!-- 		<view class="tit">
			大圣养车
		</view> -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in banners" :key="index">
				<view class="swiper-item">
					<image :src="'https://ba.fuliaoxx.com'+item.image" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="gg">
			<image src="../../static/img/gg.png" mode="widthFix"></image>
			<view class="">
				八戒快修正式上线
			</view>
		</view>
		<view class="items">
			<view class="title">
				<view class="">
					附件门店
				</view>
			</view>
			<view class="" v-if="list.length==0">
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="无门店数据">
				</u-empty>
			</view>
			<view class="item" @click="toDetail(item)" v-for="(item,index) in list" :key="index">
				<image :src="'https://ba.fuliaoxx.com'+item.image" mode=""></image>
				<view class="detail">
					<view class="" style="display: flex;justify-content: space-between;align-items: center;">
						<view class="" style="font-weight: 600;font-size: 30rpx;">
							{{item.name}}
						</view>
						<view class="" style="color: #75D65E;font-size: 24rpx;">
							{{item.distance}}km
						</view>
					</view>
					<view class="" style="color: #6D6D6D;font-size: 24rpx;">
						{{item.address}}
					</view>
					<view class="tips" style="display: flex;align-items: center;">
						<view class="tip">
							{{item.score}}分
						</view>
						<!-- 					<view class="tip tip2">
							已认证
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getShop,
		getBanner
	} from "@/request/api/home.js"
	export default {
		data() {
			return {
				list: [],
				banners: [],
				location: {
					lat: null,
					lng: null
				}
			}
		},
		onShareAppMessage(res) {
			return {
				title: '八戒快修',
				path: '/pages/index/index'
			}
		},
		onShareTimeline(res) {
			return {
				title: '八戒快修',
				path: '/pages/index/index'
			}
		},
		onLoad(opt) {

		},
		async onLoad(opt) {
			console.log('opt', opt)
			if (opt.scene) {
				console.log('opt.scene', opt.scene)
				uni.setStorageSync('salt', opt.scene)
			}
			let res = await getBanner();
			this.banners = res.data;
			let that = this;
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					that.location = {
						lat: res.latitude,
						lng: res.longitude
					}
					getShop(that.location).then((res1) => {
						that.list = res1.data;
					})
				},
				fail: function(res) {
					uni.showToast({
						title: "获取当前定位失败",
						icon: "none"
					})
				}
			});
		},
		methods: {
			toDetail(item) {
				uni.navigateTo({
					url: "/pages/detial/detial?item=" + JSON.stringify(item)
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style scoped lang="scss">
	.index {
		position: relative;

		.items {
			position: relative;
			z-index: 1;
			padding: 20rpx;
			margin: 20rpx;
			background-color: white;

			.item {
				display: flex;
				margin-bottom: 26rpx;

				.detail {
					height: 200rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
				}

				.tips {
					.tip {
						font-size: 22rpx;
						padding: 0 14rpx;
						border-radius: 10rpx;
						color: #54C439;
						margin-right: 10rpx;
						background-color: rgba(118, 252, 118, 0.3);
					}

					.tip2 {
						color: #FBB403;
						background-color: rgba(252, 171, 72, 0.3);
					}
				}
			}

			image {
				min-width: 200rpx;
				width: 200rpx;
				height: 200rpx;
				min-height: 200rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
			}

			.title {
				margin-bottom: 20rpx;
			}
		}

		.tit {
			position: relative;
			font-weight: 600;
			z-index: 1;
			font-size: 38rpx;
			padding: 20rpx;
			padding-bottom: 0;
		}

		.ot {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 600rpx;
			background-color: #75D65E;
			background: linear-gradient(to bottom, #75D65E, #f8f8f8);
		}

		.gg {
			margin: 20rpx;
			background-color: white;
			display: flex;
			align-items: center;
			position: relative;
			z-index: 1;
			padding: 16rpx 24rpx;
			border-radius: 20rpx;

			image {
				width: 60rpx;
				margin-right: 20rpx;
			}
		}

		swiper {
			height: 360rpx;
			border-radius: 20rpx;
			margin: 20rpx;
			margin-top: 0;
		}

		.swiper-item {
			height: 360rpx;
			border-radius: 20rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
	}
</style>